import ProForm, { ProFormText } from '@ant-design/pro-form';
import {Button, Form, Modal, Select, Space} from 'antd';
import { useForm } from 'antd/es/form/Form';
import React from 'react';
import {CheckOutlined, UndoOutlined} from "@ant-design/icons";
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;
export type CreateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  creatModalVisible: boolean;
  groupOptions: any;
  roleOptions: any;
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const [form] = useForm();

  const formLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 14,
    },
  };

  const onReset = () => {
    form.setFieldsValue({
      id: '',
      name: '',
      isAdmin: '',
      password: '',
      status: '',
      address: '',
    });
  };

  return (
    <Modal
      title="新增用户"
      width="600px"
      destroyOnClose
      open={props.creatModalVisible}
      onCancel={props.onCancel}
      footer={null}
    >
      <ProForm
        form={form}
        layout="horizontal"
        {...formLayout}
        onFinish={props.onSubmit}
        onReset={onReset}
        submitter={{
          render: (_, dom) => (
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Space>
                {/*{dom}*/}
                {<Button onClick={() => {
                  _.reset()
                }}><UndoOutlined />重置</Button>}
                {<Button type={"primary"} onClick={() => {
                  _.submit()
                }}><CheckOutlined />提交</Button>}

              </Space>
            </div>
          ),
        }}
      >
        <Form.Item
          label="部门"
          name="groupId"
          rules={[
            {
              required: true,
              message: '部门必选！',
            },
          ]}
        >
          <Select placeholder="请选择" options={props.groupOptions} allowClear />
        </Form.Item>
        <ProFormText
          width="md"
          name="name"
          rules={[
            {
              required: true,
              message: '用户名必填！',
            },
          ]}
          placeholder="请输入用户名"
          label="用户名"
        />
        <ProFormText
          width="md"
          name="idNum"
          rules={[
            {
              required: true,
              message: '身份证必填！',
            },
          ]}
          placeholder="请输入身份证"
          label="身份证"
        />
        <ProFormText width="md" name="phoneNum" placeholder="请输入手机号" label="手机号" />

        <Form.Item
          label="角色"
          name="roleId"
          rules={[
            {
              required: true,
              message: '角色必选！',
            },
          ]}
        >
          <Select placeholder="请选择" options={props.roleOptions} allowClear />
        </Form.Item>
      </ProForm>
    </Modal>
  );
};

export default CreateForm;
